<template>
  <div class="task-box">
    <div p-5>
      <div class="task-box-top">
        <div class="task-box-top-tittle">{{ boxTittle }}</div>
      </div>
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :labelWrap="true"
        :colon="false"
      >
        <div class="task-info">
          <div class="taskBox-tittle">
            <div class="taskBox-tittle-left"></div>
            <div class="taskBox-tittle-right">任务信息</div>
          </div>
          <a-row :gutter="32">
            <a-col class="gutter-row" :span="8">
              <a-form-item
                label="检查类型"
                name="checkTypeId"
                :labelCol="{ style: { width: '82px' } }"
              >
                <a-select
                  v-model:value="formState.checkTypeId"
                  placeholder="请选择检查类型"
                  :options="checkTypeOptions"
                  allowClear
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="8">
              <a-form-item label="主办人" name="userName" :labelCol="{ style: { width: '82px' } }">
                <a-select v-model:value="userName" placeholder="请选择主办人" :open="false">
                </a-select>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="8">
              <a-form-item
                label="
            协办人"
                name="organizerId"
                :labelCol="{ style: { width: '82px' } }"
              >
                <a-select
                  v-model:value="formState.organizerId"
                  placeholder="请选择协作人"
                  :options="organizerOptions"
                  allowClear
                ></a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <div class="base-info">
          <div class="taskBox-tittle">
            <div class="taskBox-tittle-left"></div>
            <div class="taskBox-tittle-right">基本信息</div>
          </div>
          <a-row :gutter="32">
            <a-col class="gutter-row" :span="12">
              <a-form-item
                label="当事人类型"
                name="partyType"
                class="partyType"
                :labelCol="{ style: { width: '95px' } }"
              >
                <a-radio-group
                  v-model:value="formState.partyType"
                  option-type="button"
                  button-style="solid"
                  @change="changeParty"
                >
                  <a-radio :value="0">自然人</a-radio>
                  <a-radio :value="1">法人</a-radio>
                  <a-radio :value="2">个体工商户</a-radio>
                  <a-radio :value="3">非法人组织</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <div class="baseBox">
            <a-row class="baseBox-body" :gutter="24" v-if="formState.partyType === 0">
              <a-col class="gutter-row" :span="12">
                <a-form-item label="姓名" name="placeName" :label-col="labelItemCol">
                  <a-input
                    v-model:value="formState.placeName"
                    placeholder="请输入姓名"
                    autocomplete="off"
                    show-count
                    :maxlength="16"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="性别" name="sex" :label-col="labelItemCol">
                  <a-select
                    v-model:value="formState.sex"
                    placeholder="请选择性别"
                    :options="sexOptions"
                    allowClear
                  >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="出生日期" name="birthDate" :label-col="labelItemCol">
                  <a-date-picker
                    style="width: 100%"
                    v-model:value="formState.birthDate"
                    placeholder="请选择出生日期"
                    :valueFormat="'YYYY-MM-DD'"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="联系电话" name="contactsTel" :label-col="labelItemCol">
                  <a-input
                    v-model:value="formState.contactsTel"
                    placeholder="请输入联系电话"
                    autocomplete="off"
                    show-count
                    :maxlength="13"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="证件类型" name="idType" :label-col="labelItemCol">
                  <a-select
                    v-model:value="formState.idType"
                    placeholder="请选择证件类型"
                    :options="idTypeOptions"
                    allowClear
                  >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="证件号码" name="idCode" :label-col="labelItemCol">
                  <a-input
                    v-model:value="formState.idCode"
                    placeholder="请输入证件号码"
                    autocomplete="off"
                    show-count
                    :maxlength="caseIdcode(formState.idType)"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="住址" name="operateArea" :label-col="labelItemCol">
                  <a-cascader
                    v-model:value="formState.operateArea"
                    :options="addressOptions"
                    placeholder="请选择住址"
                    :fieldNames="areaFieldNames"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="详细地址" name="operateAddress" :label-col="labelItemCol">
                  <a-input
                    v-model:value="formState.operateAddress"
                    placeholder="请输入详细地址"
                    autocomplete="off"
                    show-count
                    :maxlength="68"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="baseBox-body" :gutter="24" v-if="formState.partyType === 1">
              <a-col class="gutter-row" :span="12">
                <a-form-item label="单位名称" name="placeName">
                  <a-auto-complete
                    v-model:value="formState.placeName"
                    placeholder="请输入单位名称"
                    :options="placeOptions"
                    @select="onSelect"
                    @search="onSearch"
                    show-count
                    :maxlength="16"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="单位联系电话" name="contactsTel">
                  <a-input
                    v-model:value="formState.contactsTel"
                    placeholder="请输入单位联系电话"
                    autocomplete="off"
                    show-count
                    :maxlength="13"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="注册地址" name="registerArea">
                  <a-cascader
                    v-model:value="formState.registerArea"
                    :options="addressOptions"
                    placeholder="请选择注册地址"
                    :fieldNames="areaFieldNames"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="详细地址" name="registerAddress">
                  <a-input
                    v-model:value="formState.registerAddress"
                    placeholder="请输入详细注册地址"
                    autocomplete="off"
                    show-count
                    :maxlength="68"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="经营地址" name="operateArea">
                  <a-cascader
                    v-model:value="formState.operateArea"
                    :options="addressOptions"
                    placeholder="请选择经营地址"
                    :fieldNames="areaFieldNames"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="详细地址" name="operateAddress">
                  <a-input
                    v-model:value="formState.operateAddress"
                    placeholder="请输入详细经营地址"
                    autocomplete="off"
                    show-count
                    :maxlength="68"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="法人" name="headName">
                  <a-input
                    v-model:value="formState.headName"
                    placeholder="请输入法人姓名"
                    autocomplete="off"
                    show-count
                    :maxlength="16"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="法人电话" name="headTel">
                  <a-input
                    v-model:value="formState.headTel"
                    placeholder="请输入法人电话"
                    autocomplete="off"
                    show-count
                    :maxlength="13"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="社会统一信用代码" name="idCode" class="itemForm">
                  <a-input
                    v-model:value="formState.idCode"
                    placeholder="请输入社会统一信用代码"
                    autocomplete="off"
                    show-count
                    :maxlength="18"
                  />
                </a-form-item>
              </a-col>
              <!-- <a-col class="gutter-row" :span="12">
                <a-form-item label="经纬度" name="tudeValue">
                  <a-space-compact block>
                    <a-input v-model:value="tudeValue" readonly placeholder="请选择单位经纬度" />
                    <a-button @click="openMap" style="color: #666666 !important">选择地点</a-button>
                  </a-space-compact>
                </a-form-item>
              </a-col> -->
            </a-row>
            <a-row class="baseBox-body" :gutter="24" v-if="formState.partyType === 2">
              <a-col class="gutter-row" :span="12">
                <a-form-item label="字号名称" name="placeName">
                  <a-input
                    v-model:value="formState.placeName"
                    placeholder="请输入字号名称"
                    autocomplete="off"
                    show-count
                    :maxlength="15"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="经营者姓名" name="headName">
                  <a-input
                    v-model:value="formState.headName"
                    placeholder="请输入经营者姓名"
                    autocomplete="off"
                    show-count
                    :maxlength="16"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="注册地址" name="registerArea">
                  <a-cascader
                    v-model:value="formState.registerArea"
                    :options="addressOptions"
                    placeholder="请选择注册地址"
                    :fieldNames="areaFieldNames"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="详细地址" name="registerAddress">
                  <a-input
                    v-model:value="formState.registerAddress"
                    placeholder="请输入详细注册地址"
                    autocomplete="off"
                    show-count
                    :maxlength="68"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="经营地址" name="operateArea">
                  <a-cascader
                    v-model:value="formState.operateArea"
                    :options="addressOptions"
                    placeholder="请选择经营地址"
                    :fieldNames="areaFieldNames"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="详细地址" name="operateAddress">
                  <a-input
                    v-model:value="formState.operateAddress"
                    placeholder="请输入详细经营地址"
                    autocomplete="off"
                    show-count
                    :maxlength="68"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="单位联系电话" name="contactsTel">
                  <a-input
                    v-model:value="formState.contactsTel"
                    placeholder="请输入单位联系电话"
                    autocomplete="off"
                    show-count
                    :maxlength="13"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="社会统一信用代码" name="idCode" class="itemForm">
                  <a-input
                    v-model:value="formState.idCode"
                    placeholder="请输入社会统一信用代码"
                    autocomplete="off"
                    show-count
                    :maxlength="18"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="baseBox-body" :gutter="24" v-if="formState.partyType === 3">
              <a-col class="gutter-row" :span="12">
                <a-form-item label="单位名称" name="placeName">
                  <a-auto-complete
                    v-model:value="formState.placeName"
                    placeholder="请输入单位名称"
                    :options="placeOptions"
                    @select="onSelect"
                    @search="onSearch"
                    show-count
                    :maxlength="16"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="单位联系电话" name="contactsTel">
                  <a-input
                    v-model:value="formState.contactsTel"
                    placeholder="请输入单位联系电话"
                    autocomplete="off"
                    show-count
                    :maxlength="13"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="注册地址" name="registerArea">
                  <a-cascader
                    v-model:value="formState.registerArea"
                    :options="addressOptions"
                    placeholder="请选择注册地址"
                    :fieldNames="areaFieldNames"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="详细地址" name="registerAddress">
                  <a-input
                    v-model:value="formState.registerAddress"
                    placeholder="请输入详细注册地址"
                    autocomplete="off"
                    show-count
                    :maxlength="68"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="经营地址" name="operateArea">
                  <a-cascader
                    v-model:value="formState.operateArea"
                    :options="addressOptions"
                    placeholder="请选择经营地址"
                    :fieldNames="areaFieldNames"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="详细地址" name="operateAddress">
                  <a-input
                    v-model:value="formState.operateAddress"
                    placeholder="请输入详细经营地址"
                    autocomplete="off"
                    show-count
                    :maxlength="68"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="负责人" name="headName">
                  <a-input
                    v-model:value="formState.headName"
                    placeholder="请输入负责人姓名"
                    autocomplete="off"
                    show-count
                    :maxlength="16"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="负责人电话" name="headTel">
                  <a-input
                    v-model:value="formState.headTel"
                    placeholder="请输入负责人电话"
                    autocomplete="off"
                    show-count
                    :maxlength="13"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item label="社会统一信用代码" name="idCode" class="itemForm">
                  <a-input
                    v-model:value="formState.idCode"
                    placeholder="请输入社会统一信用代码"
                    autocomplete="off"
                    show-count
                    :maxlength="18"
                  />
                </a-form-item>
              </a-col>
              <!-- <a-col class="gutter-row" :span="12">
                <a-form-item label="经纬度" name="tudeValue">
                  <a-space-compact block>
                    <a-input v-model:value="tudeValue" readonly placeholder="请选择单位经纬度" />
                    <a-button @click="openMap" style="color: #666666 !important">选择地点</a-button>
                  </a-space-compact>
                </a-form-item>
              </a-col> -->
            </a-row>
          </div>
        </div>
      </a-form>
      <GaodeMap
        :dialogMap="open"
        :longiTudeMap="longiValue"
        :latiTudeMap="latiValue"
        :valueMap="tudeValue"
        @submitMap="submitMap"
        @closeMap="closeMap"
      ></GaodeMap>
    </div>
    <div class="bottomBox"></div>
    <div class="bottomBtns" style="z-index: 3">
      <a-space :size="12">
        <a-button @click="cacel" size="large">取消</a-button>
        <a-button type="primary" @click="onSubmit" size="large">保存</a-button>
      </a-space>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, toRaw, onMounted } from 'vue';
  import {
    getCheckType,
    getAreaList,
    saveTask,
    getIdType,
    taskxfInfo,
    updataTask,
  } from '@/api/supervision/create-task';
  import {
    isPhoneNumberValid,
    isChinaIDCard,
    getKeys,
    isHKCard,
    isPassPortCard,
  } from '@/utils/common';
  import type { Rule } from 'ant-design-vue/es/form';
  import { message } from 'ant-design-vue';
  import router from '@/router';
  import { useRoute } from 'vue-router';
  import { getInfo, organizerList } from '@/api/account';
  import { getPlaceInfo, getSiteNameList, getSiteSelByName } from '@/api/site';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import GaodeMap from '@/views/supervision/create-task/components/GaodeMap/index.vue';
  import { updMapMsg } from '@/api/routine';
  const tabsViewStore = useTabsViewStore();
  const route = useRoute();

  const formRef = ref();
  const labelCol = {
    style: {
      width: '109px',
      margin: '0 0 0 16px',
    },
  };

  const labelItemCol = {
    style: { width: '96px' },
  };

  const formState = reactive({
    taskNo: '', //任务编号
    organizerId: undefined, //协作人
    organizerName: '',
    checkTypeId: undefined, //检查类型
    partyType: 0, //当事人类型
    placeName: '', //单位(场所)名称/姓名/字号名称
    placeId: '',
    sex: undefined, //性别
    birthDate: '', //出生日期
    contactsTel: '', //自然人/单位联系电话
    idType: undefined, //证件类型
    idCode: '', //证件号码
    operateArea: [], //住址
    operateAddress: '', //详细地址
    registerArea: [], //注册地址
    registerAddress: '', //详细注册地址
    headName: '', //法人
    headTel: '', //法人电话
    longitude: '', //经度
    latitude: '', //维度
  });

  //经纬度
  const open = ref<boolean>(false);
  const tudeValue = ref('');
  const longiValue = ref('');
  const latiValue = ref('');

  const openMap = () => {
    open.value = true;
    longiValue.value = formState.longitude;
    latiValue.value = formState.latitude;
  };

  const submitMap = async (data: any) => {
    if (data[0] && data[1]) {
      tudeValue.value = `${data[0]}, ${data[1]}`;
    } else {
      tudeValue.value = '';
    }
    formState.longitude = data[0];
    formState.latitude = data[1];
    formRef.value.clearValidate('tudeValue');
    open.value = false;
  };
  const closeMap = () => {
    open.value = false;
    // tudeValue.value = '';
  };

  const changeParty = () => {
    formState.placeName = '';
    formState.placeId = '';
    formState.sex = undefined;
    formState.birthDate = '';
    formState.contactsTel = '';
    formState.idType = undefined;
    formState.idCode = '';
    formState.operateArea = [];
    formState.operateAddress = '';
    formState.registerArea = [];
    formState.registerAddress = '';
    formState.headName = '';
    formState.headTel = '';
    formState.longitude = '';
    formState.latitude = '';
    tudeValue.value = '';
  };

  const boxTittle = ref('创建任务');

  const validatePlaceName = async (_rule: Rule, value: string) => {
    if (value === '') {
      let message = ['请输入姓名', '请选择单位名称', '请输入字号名称', '请选择单位名称'][
        formState.partyType
      ];
      return Promise.reject(message);
    } else {
      return Promise.resolve();
    }
  };

  const validateOperateArea = async (_rule: Rule, value: string) => {
    if (value == '') {
      let message = ['请选择住址', '请选择经营地址', '请选择经营地址', '请选择经营地址'][
        formState.partyType
      ];
      return Promise.reject(message);
    } else {
      return Promise.resolve();
    }
  };

  const validateContactsTel = async (_rule: Rule, value: string) => {
    if (value === '') {
      return Promise.reject('请填写手机号码');
    } else {
      if (isPhoneNumberValid(value)) {
        return Promise.resolve();
      } else {
        return Promise.reject('请填写正确的手机号码');
      }
    }
  };

  const validateContactsTels = async (_rule: Rule, value: string) => {
    if (value === '') {
      let message = [
        '请输入联系电话',
        '请输入单位联系电话',
        '请输入单位联系电话',
        '请输入单位联系电话',
      ][formState.partyType];
      return Promise.reject(message);
    } else {
      return Promise.resolve();
    }
  };

  const validateContactsTelss = async (_rule: Rule, value: string) => {
    if (value === '') {
      let message = ['', '请输入法人电话', '', '请输入负责人电话'][formState.partyType];
      return Promise.reject(message);
    } else {
      return Promise.resolve();
    }
  };

  const validateIdCode = async (_rule: Rule, value: string) => {
    if (value === '') {
      let message = [
        '请输入证件号码',
        '请输入社会统一信用代码',
        '请输入社会统一信用代码',
        '请输入社会统一信用代码',
      ][formState.partyType];
      return Promise.reject(message);
    } else if (formState.idType == '身份证') {
      if (isChinaIDCard(value) || formState.partyType !== 0) {
        return Promise.resolve();
      } else {
        let message = [
          '请输入正确的证件号码',
          '请输入正确的社会统一信用代码',
          '请输入正确的社会统一信用代码',
          '请输入正确的社会统一信用代码',
        ][formState.partyType];
        return Promise.reject(message);
      }
    } else if (formState.idType == '港澳通行证') {
      if (isHKCard(value) || formState.partyType !== 0) {
        return Promise.resolve();
      } else {
        return Promise.reject('港澳居民来往内地通行证号码不合规');
      }
    } else if (formState.idType == '护照') {
      if (isPassPortCard(value) || formState.partyType !== 0) {
        return Promise.resolve();
      } else {
        return Promise.reject('护照号码不合规');
      }
    }
  };

  const validateHeadName = async (_rule: Rule, value: string) => {
    if (value === '') {
      let message = ['', '请输入法人姓名', '请输入经营者姓名', '请输入负责人姓名'][
        formState.partyType
      ];
      return Promise.reject(message);
    } else {
      return Promise.resolve();
    }
  };

  const validateuTdeValue = async (_rule: Rule, value: string) => {
    if (tudeValue.value === '') {
      let message = '请选择单位标注';
      return Promise.reject(message);
    } else {
      return Promise.resolve();
    }
  };

  const rules = {
    checkTypeId: [
      {
        required: true,
        message: '请选择检查类型',
        trigger: 'change',
      },
    ],
    organizerId: [
      {
        required: true,
        message: '请选择协办人',
        trigger: 'change',
      },
    ],
    partyType: [
      {
        required: true,
        message: '请选择当事人类型',
        trigger: 'change',
      },
    ],
    placeName: [
      {
        required: true,
        validator: validatePlaceName,
        // message: ['请输入姓名', '请输入单位名称'][formState.partyType],
        trigger: 'change',
      },
    ],
    sex: [
      {
        required: true,
        message: '请选择性别',
        trigger: 'change',
      },
    ],
    birthDate: [
      {
        required: true,
        message: '请选择出生日期',
        trigger: 'change',
      },
    ],
    contactsTel: [
      {
        required: true,
        validator: validateContactsTels,
        trigger: 'change',
      },
    ],
    idType: [
      {
        required: true,
        message: '请选择证件类型',
        trigger: 'change',
      },
    ],
    idCode: [
      {
        required: true,
        validator: validateIdCode,
        trigger: 'change',
      },
    ],
    operateArea: [
      {
        required: true,
        validator: validateOperateArea,
        trigger: 'change',
      },
    ],
    operateAddress: [
      {
        required: true,
        message: '请输入详细地址',
        trigger: 'change',
      },
    ],
    registerArea: [
      {
        required: true,
        message: '请选择注册地址',
        trigger: 'change',
      },
    ],
    registerAddress: [
      {
        required: true,
        message: '请输入详细地址',
        trigger: 'change',
      },
    ],
    headName: [
      {
        required: true,
        validator: validateHeadName,
        trigger: 'change',
      },
    ],
    headTel: [
      {
        required: true,
        validator: validateContactsTelss,
        trigger: 'change',
      },
    ],
    tudeValue: [
      {
        required: true,
        validator: validateuTdeValue,
        trigger: 'change',
      },
    ],
  } as any;

  const cacel = () => {
    router.push({
      path: '/supervision/supervision/task-management',
    });
  };
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(async () => {
        let idTypeName = '';
        let operateCountyCode = '';
        let operateCounty = '';
        let operateTownCode = '';
        let operateTown = '';
        let registerCountyCode = '';
        let registerCounty = '';
        let registerTownCode = '';
        let registerTown = '';
        if (formState.operateArea) {
          operateCountyCode = formState.operateArea[0];
          operateCounty = getKeys(addressOptions.value, formState.operateArea[0], 'name') as any;
          operateTownCode = formState.operateArea[1];
          operateTown = getKeys(addressOptions.value, formState.operateArea[1], 'name') as any;
        }
        if (formState.registerArea) {
          registerCountyCode = formState.registerArea[0];
          registerCounty = getKeys(registerAddress.value, formState.registerArea[0], 'name') as any;
          registerTownCode = formState.registerArea[1];
          registerTown = getKeys(registerAddress.value, formState.registerArea[1], 'name') as any;
        }
        if (formState.idType) {
          idTypeName = idTypeOptions.value.find((item) => item.value == formState.idType).label;
        }
        let params = {
          id: '',
          placeId: formState.placeId || '',
          taskNo: formState.taskNo || '',
          organizerId: formState.organizerId || '',
          organizerName: organizerOptions?.value.find((item) => item.value == formState.organizerId)
            .label,
          checkTypeId: formState.checkTypeId,
          checkTypeName: checkTypeOptions?.value.find((item) => item.value == formState.checkTypeId)
            .label,
          placeInfo: {
            id: formState.placeId || '',
            latitude: formState.latitude || '',
            longitude: formState.longitude || '',
            partyType: formState.partyType,
            placeName: formState.placeName || '',
            sex: formState.sex || '',
            birthDate: formState.birthDate || '',
            contactsTel: formState.contactsTel || '',
            idType: formState.idType || '',
            idTypeName,
            idCode: formState.idCode || '',
            operateCountyCode,
            operateCounty,
            operateTownCode,
            operateTown,
            registerCountyCode,
            registerCounty,
            registerTownCode,
            registerTown,
            headName: formState.headName || '',
            headTel: formState.headTel || '',
            operateAddress: formState.operateAddress || '',
            registerAddress: formState.registerAddress || '',
          },
        };

        if (route.query.id) {
          params.id = route.query.id as any;
          const res = await updataTask(params);
          if (res.code == 0) {
            message.success('编辑任务成功！');
            tabsViewStore.closeCurrentTabToUrl(route, '/supervision/supervision/task-management');
          }
        } else {
          const res = await saveTask(params);
          if (res.code == 0) {
            message.success('添加任务成功！');
            tabsViewStore.closeCurrentTabToUrl(route, '/supervision/supervision/task-management');
          }
        }
      })
      .catch((error) => {
        console.log('error', error);
      });
  };

  const caseIdcode = (val) => {
    let idTypeName = '';
    if (idTypeOptions.value) {
      idTypeName = idTypeOptions.value.find((item) => item.value == val)?.label;
    }

    switch (idTypeName) {
      case '身份证':
        return 18;
      case '护照':
        return 9;
      case '港澳通行证':
        return 9;
      default:
        return 18;
    }
  };

  const placeId = ref('');

  interface MockVal {
    label: string;
    value: string;
  }
  const placeOptions = ref<MockVal[]>([]);

  const onSelect = async (value: string) => {
    formState.placeId = value;
    formState.placeName = placeOptions.value.find((item) => item.value == value)?.label as any;

    if (formState.placeName && formState.placeId) {
      const data = await getPlaceInfo(formState.placeId);
      formState.placeId = data.id;
      formState.placeName = data.placeName;
      formState.sex = data.sex;
      formState.birthDate = data.birthDate;
      formState.contactsTel = data.contactsTel;
      formState.idType = data.idType;
      formState.idCode = data.idCode;
      formState.operateAddress = data.operateAddress;
      formState.registerAddress = data.registerAddress;
      formState.headName = data.headName;
      formState.headTel = data.headTel;
      formState.operateArea = [data.operateCountyCode, data.operateTownCode] as any;
      formState.registerArea = [data.registerCountyCode, data.registerTownCode] as any;
      formState.latitude = data.latitude;
      formState.longitude = data.longitude;
      if (data.latitude != '' && data.longitude != '') {
        tudeValue.value = `${formState.longitude}, ${formState.latitude}`;
      } else {
        tudeValue.value = '';
      }
    }

    // formRef.value.validate();
    formRef.value.clearValidate('placeName');
    formRef.value.clearValidate('contactsTel');
    formRef.value.clearValidate('operateAddress');
    formRef.value.clearValidate('registerAddress');
    formRef.value.clearValidate('headName');
    formRef.value.clearValidate('headTel');
    formRef.value.clearValidate('operateArea');
    formRef.value.clearValidate('registerArea');
    formRef.value.clearValidate('idCode');
    formRef.value.clearValidate('tudeValue');
  };

  const onSearch = async (searchText: string) => {
    formState.placeName = searchText;

    const res = await getSiteNameList({ placeName: formState.placeName });
    placeOptions.value = res.map((item) => {
      return {
        label: item.placeName,
        value: item.id,
      };
    });
  };

  // const changeInfo = async () => {
  //   const res = await getSiteNameList({ placeName: formState.placeName });
  //   placeOptions.value = res.map((item) => {
  //     return {
  //       label: item.placeName,
  //       value: item.id,
  //     };
  //   });
  // };

  //性别
  const sexOptions = [
    {
      label: '男',
      value: 1,
    },
    {
      label: '女',
      value: 2,
    },
  ];

  const userName = ref();

  const organizerOptions = ref();

  //证件类型
  const idTypeOptions = ref();
  //检查类型相关
  const checkTypeOptions = ref();
  //区域相关
  const addressOptions = ref();
  const registerAddress = ref();
  const areaFieldNames = {
    label: 'name',
    value: 'id',
  };

  const organizers = ref({
    type: 0,
  });

  onMounted(async () => {
    const userData = await getInfo();
    userName.value = userData.userName;

    const res_check = await getCheckType();
    if (res_check.code === 0) {
      checkTypeOptions.value = res_check.data.map((item) => {
        return {
          label: item.configName,
          value: item.id,
        };
      });
    }
    const res_id = await getIdType();
    if (res_id.code === 0) {
      idTypeOptions.value = res_id.data.map((item) => {
        return {
          label: item.configName,
          value: item.id,
        };
      });
    }
    const res_area = await getAreaList();
    if (res_area.code === 0) {
      addressOptions.value = res_area.data[0].children;
      registerAddress.value = res_area.data[0].children;
    }

    if (route.query.id) {
      boxTittle.value = '编辑任务';
      const data = await taskxfInfo(route.query.id);
      userName.value = data.checkerName;
      organizers.value = {
        type: 1,
      };
      formState.organizerId = data.organizerId;
      formState.organizerName = data.organizerName;
      formState.taskNo = data.taskNo;
      formState.checkTypeId = data.checkTypeId;
      formState.partyType = data.placeInfo.partyType;
      formState.placeName = data.placeInfo.placeName;
      formState.placeId = data.placeId;
      formState.sex = data.placeInfo.sex;
      formState.birthDate = data.placeInfo.birthDate;
      formState.contactsTel = data.placeInfo.contactsTel;
      formState.idType = data.placeInfo.idType;
      formState.idCode = data.placeInfo.idCode;
      formState.operateAddress = data.placeInfo.operateAddress;
      formState.registerAddress = data.placeInfo.registerAddress;
      formState.headName = data.placeInfo.headName;
      formState.headTel = data.placeInfo.headTel;
      formState.operateArea = [
        data.placeInfo.operateCountyCode,
        data.placeInfo.operateTownCode,
      ] as any;
      formState.registerArea = [
        data.placeInfo.registerCountyCode,
        data.placeInfo.registerTownCode,
      ] as any;
      if (data.placeInfo.latitude != '' && data.placeInfo.longitude != '') {
        formState.latitude = data.placeInfo.latitude;
        formState.longitude = data.placeInfo.longitude;
        tudeValue.value = `${formState.longitude}, ${formState.latitude}`;
      }
    }
    const organizer = await organizerList(organizers.value);

    if (organizer.code === 0) {
      organizerOptions.value = organizer.data.map((item) => {
        return {
          label: item.userName,
          value: item.id,
        };
      });
    }
  });
</script>

<style lang="less" scoped>
  .task-box {
    background-color: #fff;

    &-top {
      &-tittle {
        padding: 0 0 16px;
        border-bottom: 1px solid rgb(240 240 240 / 100%);
        color: rgb(68 68 68 / 100%);
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
      }
    }

    .base-info {
      .baseBox {
        width: 68%;
        min-width: 630px;
        margin: 0 0 16px 95px;
        border: 1px solid #f0f0f0;

        &-body {
          padding: 16px 16px 0 0;
        }
      }

      .partyType {
        .ant-radio-button-wrapper {
          border-color: #f0f0f0;
          border-bottom: 0;
        }

        .ant-radio-button-wrapper:first-child {
          border-inline-start: 1px solid #f0f0f0;
        }
        .ant-radio-button-wrapper:not(:first-child)::before {
          background-color: #f0f0f0;
        }
      }
    }

    .taskBox {
      &-tittle {
        display: flex;
        align-items: center;
        padding: 13px 0;

        &-left {
          height: 14px;
          margin-right: 7px;
          border: 1px solid #0f53ac;
          border-radius: 4px;
        }

        &-right {
          color: rgb(68 68 68 / 100%);
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
        }
      }
    }

    :global(.ant-form-item.partyType) {
      margin-bottom: 0 !important;
    }

    //lable字数大于5时，红点对齐第一行文字
    :global(.itemForm.ant-form-item .ant-form-item-label > label) {
      align-items: baseline;
      line-height: 15px;
    }

    .bottomBox {
      height: 60px;
    }

    .bottomBtns {
      position: fixed;
      right: 0;
      bottom: 0;
      width: calc(100% - 200px);
      padding: 8px 20px;
      border-top: 1px solid rgb(240 240 240 / 100%);
      background: rgb(255 255 255 / 100%);
      text-align: right;
    }
  }
</style>
